import React, {Component} from 'react'
import {Card, Table, Button, Icon, message, Modal} from "antd";
import LinkButton from '../../components/link-button'
import {reqCategoryAll, reqUpdateCategorys, reqAddCategory} from '../../api'
import AddForm from './add-form'
import UpdateForm from './update-form'

/**
 * 商品分类
 */
export default class Category extends Component {

    state = {
        //是否正在获取数据中
        loading: false,
        //一级分类列表
        categorys: [],
        //二级分类列表
        subCategorys: [],
        //显示当前要显示的分类列表的父分类id
        deleted: '0',
        //当前需要显示的分类列表的夫分类名称
        username: '',
        id: '',
        //标识添加。更新的确认框是否显示，0：都不显示，1：显示添加，2：显示更新
        showStatus: 0,

    }
    //初始化Table所有列的数组
    initColumns = () => {
        this.columns = [
            {
                title: '分类的名称',
                dataIndex: 'username',
            },
            {
                title: '操作',
                width: 300,
                render: (category) => (

                    //返回需要显示的界面标签
                    <span>
                      <LinkButton onClick={() => this.showUpdate(category)}>修改分类</LinkButton>
                        {/*  如何向事件回调函数传递参数，先定义一个匿名函数，在函数调用处理的函数并传入数据*/}
                        {this.state.deleted === '0' ?
                            <LinkButton onClick={() => this.showSubCategorys(category)}>查看子分类</LinkButton> : null}

                  </span>
                )
            }
        ]
    }


    /**
     * 响应点击取消：隐藏确认框
     */
    handleCancel = () => {
        // 清除输入数据
        this.form.resetFields()
        this.setState({
            showStatus: 0
        })
    }

    /**
     * 添加分类
     */
    addCategory = () => {
        this.form.validateFields(async (err, values) => {
            if (!err) {
                this.setState({
                    showStatus: 0
                })
                //收集数据，并提交添加分类的请求
                const {username, password, perms} = values
                //清除输入数据
                this.form.resetFields()
                const result = await reqAddCategory(username, password, perms)
                console.log(result)
                if (result.code === 200) {
                    //添加发分类就是当前分类下的列表
                    if (username === this.username) {
                        //重新获取当前分类列表下的分类
                        this.getCategorys()
                    } else if (password === '123') {
                        //在二级分类列表下添加一级分类，重新获取一级分类列表，单不需要显示一级列表
                        this.setState({parentId: '0'}, () => {
                            this.getCategorys('0')
                        })
                    }
                    message.success('添加成功')

                } else {
                    message.error('添加失败')
                }
            }
        })

    }

    /**
     * 显示添加的确认框
     */
    showAdd = () => {
        this.setState({
            showStatus: 1
        })
    }

    /**
     * 显示修改确认框
     */
    showUpdate = (category) => {
        //保存分类对象
        this.category = category
        //更新状态
        this.setState({
            showStatus: 2
        })
    }

    /**
     * 更新分类
     */
    updateCategory = async () => {
        //进行表单验证，只有通过了才处理
        this.form.validateFields(async (err, values) => {
            if (!err) {
                //1、隐藏确认框
                this.setState({
                    showStatus: 0
                })

                //准备数据
                // const username = this.form.getFieldValue('categoryName')
                const {username} = values
                console.log(username)
                const id = this.category.id
                //清除输入数据
                this.form.resetFields()
                //2、发请求更新分类
                const result = await reqUpdateCategorys({username, id})
                if (result.code === 200) {
                    //3、重新显示列表
                    this.getCategorys()
                }
            }
        })

    }


    //获取一级分类列表显示

    //为第一次render（）准备数据
    componentWillMount() {
        this.initColumns()
    }

    getCategorys = async (deleted) => {
        //在发生请求前显示Loading
        this.setState({loading: true})

        deleted = this.state.deleted
        console.log(deleted)

        //发异步ajax请求，获取数据
        const result = await reqCategoryAll(deleted)
        //在请求完此后，隐藏Loding
        this.setState({loading: false})

        if (result.code === 200) {
            //取出分类数组（可能是一级也可能是二级）
            const categorys = result.data
            if (deleted === '0') {
                //更新状态
                this.setState({
                    categorys
                })
            } else {
                this.setState({
                    //更新二级分类状态
                    subCategorys: categorys
                })

            }
        } else {
            message.error('获取分类列表失败')
        }
    }


    //显示指定一级分类对象的二子列表
    showSubCategorys = (category) => {
        console.log(category)
        //更新状态
        this.setState({
            deleted: category.deleted,
            username: category.username
        }, () => {
            //获取二级分类列表显示
            this.getCategorys()
        })
    }

    //显示一级分类对象列表
    showCategorys = () => {
        this.setState({
            subCategorys: [],
            deleted: '0',
            username: ''

        })
    }

    //发生异步ajax请求
    componentDidMount() {
        //获取一级列表
        this.getCategorys()
    }

    render() {
        //读取状态数据
        const {categorys, subCategorys, deleted, username, loading, showStatus, id} = this.state
        //读取指定的分类 ,如果还没有指定，就指定为空
        const category = this.category || {}
        //card的左侧
        const title = deleted === '0' ? '一级分类列表' : (
            <span>
                <LinkButton onClick={this.showCategorys}>一级分类列表</LinkButton>
                <Icon type='arrow-right' style={{marginRight: 5}}></Icon>
                <span>{username}</span>
            </span>

        )

        //Card的右侧
        const extra = (
            <Button type='primary' onClick={this.showAdd}>
                <Icon type='plus'></Icon>
                添加
            </Button>
        )

        return (
            <Card title={title} extra={extra}>
                <Table
                    bordered
                    dataSource={categorys}
                    rowKey='id'
                    loading={loading}
                    columns={this.columns}
                    pagination={{defaultPageSize: 5, showQuickJumper: true}}
                ></Table>

                <Modal
                    title="添加分类"
                    visible={showStatus === 1}
                    onOk={this.addCategory}
                    onCancel={this.handleCancel}
                >
                    <AddForm categorys={categorys}
                             username={username}
                             setForm={(form) => {
                                 this.form = form
                             }}
                    />
                </Modal> <Modal
                title="更新分类"
                visible={showStatus === 2}
                onOk={this.updateCategory}
                onCancel={this.handleCancel}
            >
                <UpdateForm
                    username={category.username}
                    setForm={(form) => {
                        this.form = form
                    }}/>
            </Modal>
            </Card>
        )
    }

}